From dab6396ebe79c9b32734b1eb047b9ee3b54365c7 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 19 Feb 2025 00:35:01 -0800
Subject: [PATCH] fix: inline citations

---
 src/lib/components/chat/Messages/Citations.svelte      |  5 +++--
 .../chat/Messages/Markdown/MarkdownInlineTokens.svelte |  2 +-
 .../components/chat/Messages/Markdown/Source.svelte    |  3 ++-
 .../components/chat/Messages/ResponseMessage.svelte    | 10 +++++-----
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/chat/Messages/Citations.svelte b/src/lib/components/chat/Messages/Citations.svelte
index f8d57cbb7..095e29edf 100644
--- a/src/lib/components/chat/Messages/Citations.svelte
+++ b/src/lib/components/chat/Messages/Citations.svelte
@@ -7,6 +7,7 @@
 
 	const i18n = getContext('i18n');
 
+	export let id = '';
 	export let sources = [];
 
 	let citations = [];
@@ -100,7 +101,7 @@
 			<div class="flex text-xs font-medium flex-wrap">
 				{#each citations as citation, idx}
 					<button
-						id={`source-${idx}`}
+						id={`source-${id}-${idx}`}
 						class="no-toggle outline-hidden flex dark:text-gray-300 p-1 bg-white dark:bg-gray-900 rounded-xl max-w-96"
 						on:click={() => {
 							showCitationModal = true;
@@ -179,7 +180,7 @@
 					<div class="flex text-xs font-medium flex-wrap">
 						{#each citations as citation, idx}
 							<button
-								id={`source-${idx}`}
+								id={`source-${id}-${idx}`}
 								class="no-toggle outline-hidden flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96"
 								on:click={() => {
 									showCitationModal = true;
diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte
index 5d97f3aa5..dc24b6dee 100644
--- a/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte
+++ b/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte
@@ -29,7 +29,7 @@
 		{: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} />
+			<Source {id} {token} onClick={onSourceClick} />
 		{:else}
 			{token.text}
 		{/if}
diff --git a/src/lib/components/chat/Messages/Markdown/Source.svelte b/src/lib/components/chat/Messages/Markdown/Source.svelte
index c1300462b..7215d1913 100644
--- a/src/lib/components/chat/Messages/Markdown/Source.svelte
+++ b/src/lib/components/chat/Messages/Markdown/Source.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	export let id;
 	export let token;
 	export let onClick: Function = () => {};
 
@@ -39,7 +40,7 @@
 	<button
 		class="text-xs font-medium w-fit translate-y-[2px] px-2 py-0.5 dark:bg-white/5 dark:text-white/60 dark:hover:text-white bg-gray-50 text-black/60 hover:text-black transition rounded-lg"
 		on:click={() => {
-			onClick(attributes.data);
+			onClick(id, attributes.data);
 		}}
 	>
 		<span class="line-clamp-1">
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index e8c6c3925..f6074cd80 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -732,9 +732,9 @@
 										onTaskClick={async (e) => {
 											console.log(e);
 										}}
-										onSourceClick={async (e) => {
-											console.log(e);
-											let sourceButton = document.getElementById(`source-${e}`);
+										onSourceClick={async (id, idx) => {
+											console.log(id, idx);
+											let sourceButton = document.getElementById(`source-${message.id}-${idx}`);
 											const sourcesCollapsible = document.getElementById(`collapsible-sources`);
 
 											if (sourceButton) {
@@ -753,7 +753,7 @@
 												});
 
 												// Try clicking the source button again
-												sourceButton = document.getElementById(`source-${e}`);
+												sourceButton = document.getElementById(`source-${message.id}-${idx}`);
 												sourceButton && sourceButton.click();
 											}
 										}}
@@ -790,7 +790,7 @@
 								{/if}
 
 								{#if (message?.sources || message?.citations) && (model?.info?.meta?.capabilities?.citations ?? true)}
-									<Citations sources={message?.sources ?? message?.citations} />
+									<Citations id={message?.id} sources={message?.sources ?? message?.citations} />
 								{/if}
 
 								{#if message.code_executions}