enh: inline citations

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

@@ -12,9 +12,11 @@
 
 	import Image from '$lib/components/common/Image.svelte';
 	import KatexRenderer from './KatexRenderer.svelte';
+	import Source from './Source.svelte';
 
 	export let id: string;
 	export let tokens: Token[];
+	export let onSourceClick: Function = () => {};
 </script>
 
 {#each tokens as token}
@@ -26,6 +28,8 @@
 			{@html html}
 		{:else if token.text.includes(`<iframe src="${WEBUI_BASE_URL}/api/v1/files/`)}
 			{@html `${token.text}`}
+		{:else if token.text.includes(`<source_id`)}
+			<Source {token} onClick={onSourceClick} />
 		{:else}
 			{token.text}
 		{/if}

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

@@ -25,6 +25,7 @@
 	export let top = true;
 
 	export let save = false;
+	export let onSourceClick: Function = () => {};
 
 	const headerComponent = (depth: number) => {
 		return 'h' + depth;
@@ -62,7 +63,7 @@
 		<hr />
 	{:else if token.type === 'heading'}
 		<svelte:element this={headerComponent(token.depth)}>
-			<MarkdownInlineTokens id={`${id}-${tokenIdx}-h`} tokens={token.tokens} />
+			<MarkdownInlineTokens id={`${id}-${tokenIdx}-h`} tokens={token.tokens} {onSourceClick} />
 		</svelte:element>
 	{:else if token.type === 'code'}
 		{#if token.raw.includes('```')}
@@ -108,6 +109,7 @@
 										<MarkdownInlineTokens
 											id={`${id}-${tokenIdx}-header-${headerIdx}`}
 											tokens={header.tokens}
+											{onSourceClick}
 										/>
 									</div>
 								</th>
@@ -126,6 +128,7 @@
 											<MarkdownInlineTokens
 												id={`${id}-${tokenIdx}-row-${rowIdx}-${cellIdx}`}
 												tokens={cell.tokens}
+												{onSourceClick}
 											/>
 										</div>
 									</td>
@@ -205,19 +208,27 @@
 		></iframe>
 	{:else if token.type === 'paragraph'}
 		<p>
-			<MarkdownInlineTokens id={`${id}-${tokenIdx}-p`} tokens={token.tokens ?? []} />
+			<MarkdownInlineTokens
+				id={`${id}-${tokenIdx}-p`}
+				tokens={token.tokens ?? []}
+				{onSourceClick}
+			/>
 		</p>
 	{:else if token.type === 'text'}
 		{#if top}
 			<p>
 				{#if token.tokens}
-					<MarkdownInlineTokens id={`${id}-${tokenIdx}-t`} tokens={token.tokens} />
+					<MarkdownInlineTokens id={`${id}-${tokenIdx}-t`} tokens={token.tokens} {onSourceClick} />
 				{:else}
 					{unescapeHtml(token.text)}
 				{/if}
 			</p>
 		{:else if token.tokens}
-			<MarkdownInlineTokens id={`${id}-${tokenIdx}-p`} tokens={token.tokens ?? []} />
+			<MarkdownInlineTokens
+				id={`${id}-${tokenIdx}-p`}
+				tokens={token.tokens ?? []}
+				{onSourceClick}
+			/>
 		{:else}
 			{unescapeHtml(token.text)}
 		{/if}

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let token;
+	export let onClick: Function = () => {};
+
+	let id = '';
+	function extractDataAttribute(input) {
+		// Use a regular expression to extract the value of the `data` attribute
+		const match = input.match(/data="([^"]*)"/);
+		// Check if a match was found and return the first captured group
+		return match ? match[1] : null;
+	}
+
+	$: id = extractDataAttribute(token.text);
+</script>
+
+<button
+	class="text-xs font-medium px-1.5 py-0.5 dark:bg-white/5 dark:hover:bg-white/10 bg-black/5 hover:bg-black/10 transition rounded-lg"
+	on:click={() => {
+		onClick(id);
+	}}
+>
+	{id}
+</button>