refac/enh: mention token rendering

src/lib/components/chat/Messages/Markdown.svelte

@@ -5,6 +5,7 @@
 
 	import markedExtension from '$lib/utils/marked/extension';
 	import markedKatexExtension from '$lib/utils/marked/katex-extension';
+	import { mentionExtension } from '$lib/utils/marked/mention-extension';
 
 	import MarkdownTokens from './Markdown/MarkdownTokens.svelte';
 
@@ -37,6 +38,7 @@
 
 	marked.use(markedKatexExtension(options));
 	marked.use(markedExtension(options));
+	marked.use({ extensions: [mentionExtension({ triggerChar: '@' })] });
 
 	$: (async () => {
 		if (content) {

src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte

@@ -16,6 +16,7 @@
 	import HtmlToken from './HTMLToken.svelte';
 	import TextToken from './MarkdownInlineTokens/TextToken.svelte';
 	import CodespanToken from './MarkdownInlineTokens/CodespanToken.svelte';
+	import MentionToken from './MarkdownInlineTokens/MentionToken.svelte';
 
 	export let id: string;
 	export let done = true;
@@ -60,6 +61,8 @@
 			frameborder="0"
 			onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';"
 		></iframe>
+	{:else if token.type === 'mention'}
+		<MentionToken {token} />
 	{:else if token.type === 'text'}
 		<TextToken {token} {done} />
 	{/if}

src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens/MentionToken.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import type { Token } from 'marked';
+
+	export let token: Token;
+</script>
+
+<Tooltip as="span" className="mention" content={token.id} placement="top">
+	{token.triggerChar}{token.label}
+</Tooltip>