refac

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

@@ -68,11 +68,12 @@
 </script>
 
 <LinkPreview.Root openDelay={0} closeDelay={0}>
-	<LinkPreview.Trigger class="mention cursor-pointer no-underline! font-normal! ">
+	<LinkPreview.Trigger class=" cursor-pointer no-underline! font-normal! ">
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 
 		<span
+			class="mention"
 			on:click={async () => {
 				if (triggerChar === '@') {
 					if (idType === 'U') {

src/lib/utils/marked/mention-extension.ts

@@ -20,9 +20,9 @@ function mentionStart(src: string) {
 
 function mentionTokenizer(this: any, src: string, options: MentionOptions = {}) {
 	const trigger = options.triggerChar ?? '@';
-
 	// Build dynamic regex for `<@id>`, `<@id|label>`, `<@id|>`
-	const re = new RegExp(`^<\\${trigger}([\\w.\\-:]+)(?:\\|([^>]*))?>`);
+	// Added forward slash (/) to the character class for IDs
+	const re = new RegExp(`^<\\${trigger}([\\w.\\-:/]+)(?:\\|([^>]*))?>`);
 	const m = re.exec(src);
 	if (!m) return;
 
@@ -71,14 +71,3 @@ export function mentionExtension(opts: MentionOptions = {}) {
 // Usage:
 // import { marked } from 'marked';
 // marked.use({ extensions: [mentionExtension({ triggerChar: '@' })] });
-//
-// "<@llama3.2:latest>" →
-// <span class="mention" data-type="mention" data-id="llama3.2:latest" data-mention-suggestion-char="@">@llama3.2:latest</span>
-//
-// "<@llama3.2:latest|friendly>" →
-// <span class="mention" ...>@friendly</span>
-//
-// "<@llama3.2:latest|>" →
-// <span class="mention" ...>@llama3.2:latest</span>
-//
-// If triggerChar = "#"