38 lines
1.0 KiB
Vue
38 lines
1.0 KiB
Vue
<template>
|
|
<div class="max-w-[75%] flex flex-col">
|
|
<slot name="header"></slot>
|
|
<div class="text-sm text-gray-700 flex flex-row">
|
|
<div v-html="compiledMarkdown"></div>
|
|
<ChatLoading v-if="msg.isLoading" />
|
|
</div>
|
|
<slot name="footer"></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ChatMessage } from '../model/ChatModel';
|
|
import { computed } from 'vue'
|
|
import MarkdownIt from 'markdown-it'
|
|
import hljs from 'highlight.js'
|
|
import 'highlight.js/styles/github.css'
|
|
import ChatLoading from './ChatLoading.vue';
|
|
|
|
interface Props {
|
|
msg: ChatMessage
|
|
}
|
|
|
|
const { msg } = defineProps<Props>()
|
|
const md = new MarkdownIt({
|
|
highlight: function (str: string, lang: string) {
|
|
if (lang && hljs.getLanguage(lang)) {
|
|
try {
|
|
return hljs.highlight(str, { language: lang, ignoreIllegals: true }).value;
|
|
} catch (__) { }
|
|
}
|
|
// 自动检测
|
|
return hljs.highlightAuto(str).value;
|
|
}
|
|
});
|
|
const compiledMarkdown = computed(() => md.render(msg.messageContent))
|
|
|
|
</script> |