File size: 2,035 Bytes
755dd12 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<script setup lang="ts">
import { IMessage } from '../../interface';
import { useI18n } from 'vue-i18n';
import { marked } from 'marked';
import { RiRefreshLine } from '@remixicon/vue';
import { citationMarkdownParse } from '../../utils';
import { computed } from 'vue';
interface Iprops {
message: IMessage
enableReload: boolean
}
const { t } = useI18n();
const props = defineProps<Iprops>();
const parsedContent = computed(() => {
const { content } = props.message;
const md = citationMarkdownParse(content);
const html = marked.parse(md, {
async: false
});
const parent = document.createElement('div');
parent.innerHTML = html as string;
const citationTags = parent.querySelectorAll('a');
citationTags.forEach(tag => {
const citationNumber = tag.getAttribute('href');
const text = tag.innerText;
if (text !== 'citation') return;
const w = document.createElement('span');
w.classList.add('text-xs', 'inline-block', 'text-center', 'size-4', 'text-zinc-50', 'bg-zinc-800', 'align-top', 'rounded-full');
w.innerText = `${citationNumber}`;
tag.parentNode?.replaceChild(w, tag);
});
return parent.innerHTML;
});
</script>
<script lang="ts">
export default {
name: 'ChatMessage'
};
</script>
<template>
<div class="h-auto w-full">
<div class="flex flex-col gap-2">
<div v-if="message.role === 'user'" class="flex items-center gap-2 text-xs text-zinc-400">
{{ message.content }}
<t-tooltip :content="t('reload')">
<t-button v-if="enableReload" theme="default" shape="circle">
<template #icon>
<RiRefreshLine />
</template>
</t-button>
</t-tooltip>
</div>
<div v-else class="rounded-xl bg-zinc-50 p-4 leading-6 text-zinc-600 shadow-md shadow-zinc-100 dark:bg-zinc-700 dark:text-zinc-200 dark:shadow-zinc-800">
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="markdown-body" v-html="parsedContent"></div>
</div>
</div>
</div>
</template>
|