File size: 4,877 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 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
<script lang="tsx">
export default {
name: 'ChatAnswer'
};
</script>
<script setup lang="tsx">
import { watch, ref, render } from 'vue';
import { MessagePlugin, Popup } from 'tdesign-vue-next';
import { citationMarkdownParse } from '../utils';
import { marked } from 'marked';
import { useI18n } from 'vue-i18n';
import { RiRestartLine, RiClipboardLine, RiShareForwardLine } from '@remixicon/vue';
interface Iprops {
query?: string
answer?: string
contexts?: Record<string, any>[]
loading?: boolean
}
interface IEmits {
(e: 'reload'): void
}
const { t } = useI18n();
const props = defineProps<Iprops>();
const emits = defineEmits<IEmits>();
const answerRef = ref<HTMLDivElement | null>(null);
// html string
// const answerParse = computed(() => {
// processAnswer(props.answer)
// return
// })
const onReload = () => {
emits('reload');
};
const onCopy = async () => {
try {
const text = answerRef.value?.innerText;
if (text) {
await navigator.clipboard.writeText(text);
MessagePlugin.success(t('message.success'))
}
} catch (err) {
MessagePlugin.error(t('message.copyError'));
}
};
const onShare = async () => {
try {
const url = window.location.href
const copyMsg = `${props.query}\n${url}`
await navigator.clipboard.writeText(copyMsg);
MessagePlugin.success(t('message.shareSuccess'))
} catch (err) {
MessagePlugin.error(t('message.copyError'));
}
};
watch(() => props.answer, () => {
const parent = processAnswer(props.answer);
answerRef.value!.innerHTML = '';
answerRef.value?.append(parent);
});
function processAnswer (answer?: string) {
if (!answer) return '';
const citation = citationMarkdownParse(props?.answer || '');
const html = marked.parse(citation, {
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;
// popover
const popover = (
<span class="inline-block w-4">
<Popup trigger="click" content={getCitationContent(citationNumber)}>
<span class="inline-block size-4 cursor-pointer rounded-full bg-gray-300 text-center align-top text-xs text-green-600 hover:opacity-80 dark:bg-black">
{citationNumber || ''}
</span>
</Popup>
</span>
);
// wrapper
const w = document.createElement('span');
render(popover, w);
tag.parentNode?.replaceChild(w, tag);
});
return parent;
}
function getCitationContent (num?: string | null) {
if (!num) return () => <></>;
const context = props.contexts?.find((item) => item.id === +num);
if (!context) return () => <></>;
return () => (
<div class="flex h-auto w-80 flex-col p-2">
<div class="flex flex-nowrap items-center gap-1 font-bold leading-8">
<t-tag size="small" theme="primary">{num}</t-tag>
<span class="w-72 truncate">{context.name}</span>
</div>
<div class="mt-1 text-xs leading-6 text-gray-600 dark:text-gray-400">
{context.snippet}
</div>
<div class="mt-2 border-0 border-t border-solid border-gray-100 pt-2 leading-6 dark:border-gray-700">
<a href={context.url} target="_blank" class="inline-block max-w-full truncate text-blue-600">
{context.url}
</a>
</div>
</div>
);
}
</script>
<template>
<div class="h-auto w-full text-base leading-7 text-zinc-600 dark:text-gray-200">
<t-skeleton theme="paragraph" animation="flashed" :loading="!answer"></t-skeleton>
<div ref="answerRef" class="markdown-body h-auto w-full dark:bg-zinc-800" />
<div v-if="!loading" class="flex w-full flex-row justify-between border-0 border-b border-solid border-zinc-200 py-2 dark:border-zinc-600">
<div class="flex gap-2">
<t-tooltip :content="t('share')">
<t-button :disabled="loading" theme="default" shape="round" variant="dashed" @click="onShare">
<template #icon><RiShareForwardLine size="18"/></template>
<span class="ml-2">{{ t('share') }}</span>
</t-button>
</t-tooltip>
</div>
<div class="flex flex-row gap-2">
<t-tooltip :content="t('copy')">
<t-button :disabled="loading" theme="default" shape="circle" variant="dashed" @click="onCopy">
<template #icon><RiClipboardLine size="16"/></template>
</t-button>
</t-tooltip>
<t-tooltip :content="t('reload')">
<t-button :disabled="loading" theme="default" shape="circle" variant="dashed" @click="onReload">
<template #icon><RiRestartLine size="16"/></template>
</t-button>
</t-tooltip>
</div>
</div>
</div>
</template> |