From 3f24062416b8e9b0ba5692dc1057fa13d85223b6 Mon Sep 17 00:00:00 2001
From: Feynman Liang <feynman.liang@gmail.com>
Date: Wed, 12 Feb 2025 12:30:23 -0800
Subject: [PATCH 1/3] Adds source-* ids when citations > 3

---
 src/lib/components/chat/Messages/Citations.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/chat/Messages/Citations.svelte b/src/lib/components/chat/Messages/Citations.svelte
index b434b15db..b24d1fe89 100644
--- a/src/lib/components/chat/Messages/Citations.svelte
+++ b/src/lib/components/chat/Messages/Citations.svelte
@@ -170,6 +170,7 @@
 					<div class="flex text-xs font-medium">
 						{#each citations as citation, idx}
 							<button
+								id={`source-${citation.source.name}`}
 								class="no-toggle outline-none 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;

From 08bc7d4cfe7da29b869cba78c341af8c0af76d1b Mon Sep 17 00:00:00 2001
From: Feynman Liang <feynman.liang@gmail.com>
Date: Wed, 12 Feb 2025 13:46:42 -0800
Subject: [PATCH 2/3] Uncollapse so all source buttons visible

---
 .../components/chat/Messages/Citations.svelte |  2 +-
 .../chat/Messages/ResponseMessage.svelte      | 19 +++++++++++++++++--
 src/lib/components/common/Collapsible.svelte  |  3 ++-
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/chat/Messages/Citations.svelte b/src/lib/components/chat/Messages/Citations.svelte
index b24d1fe89..a40830bf9 100644
--- a/src/lib/components/chat/Messages/Citations.svelte
+++ b/src/lib/components/chat/Messages/Citations.svelte
@@ -121,7 +121,7 @@
 				{/each}
 			</div>
 		{:else}
-			<Collapsible bind:open={isCollapsibleOpen} className="w-full">
+			<Collapsible id="collapsible-sources" bind:open={isCollapsibleOpen} className="w-full">
 				<div
 					class="flex items-center gap-2 text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 transition cursor-pointer"
 				>
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index f6a4b0bc0..f957c7445 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -679,12 +679,27 @@
 										floatingButtons={message?.done}
 										save={!readOnly}
 										{model}
-										onSourceClick={(e) => {
+										onSourceClick={async (e) => {
 											console.log(e);
-											const sourceButton = document.getElementById(`source-${e}`);
+											let sourceButton = document.getElementById(`source-${e}`);
+											const sourcesCollapsible = document.getElementById(`collapsible-sources`);
 
 											if (sourceButton) {
 												sourceButton.click();
+											} else if (sourcesCollapsible) {
+												// Open sources collapsible so we can click the source button
+												sourcesCollapsible.querySelector("div:first-child").dispatchEvent(new PointerEvent('pointerup', {}))
+
+												// Wait for next frame to ensure DOM updates
+												await new Promise(resolve => {
+													requestAnimationFrame(() => {
+														requestAnimationFrame(resolve);
+													});
+												});
+
+												// Try clicking the source button again
+												sourceButton = document.getElementById(`source-${e}`);
+												sourceButton && sourceButton.click();
 											}
 										}}
 										onAddMessages={({ modelId, parentId, messages }) => {
diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
index 4f6b1ea95..d437e9840 100644
--- a/src/lib/components/common/Collapsible.svelte
+++ b/src/lib/components/common/Collapsible.svelte
@@ -34,6 +34,7 @@
 	import Spinner from './Spinner.svelte';
 
 	export let open = false;
+  export let id = '';
 	export let className = '';
 	export let buttonClassName =
 		'w-fit text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition';
@@ -46,7 +47,7 @@
 	export let hide = false;
 </script>
 
-<div class={className}>
+<div id={id} class={className}>
 	{#if title !== null}
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<!-- svelte-ignore a11y-click-events-have-key-events -->

From 361a98980e7cc7763d16f5522a05c7188bab4c0e Mon Sep 17 00:00:00 2001
From: Feynman Liang <feynman.liang@gmail.com>
Date: Wed, 12 Feb 2025 13:49:37 -0800
Subject: [PATCH 3/3] Retab collapsible

---
 src/lib/components/common/Collapsible.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
index c2290a6dc..c06b525b8 100644
--- a/src/lib/components/common/Collapsible.svelte
+++ b/src/lib/components/common/Collapsible.svelte
@@ -34,7 +34,7 @@
 	import Spinner from './Spinner.svelte';
 
 	export let open = false;
-  export let id = '';
+	export let id = '';
 	export let className = '';
 	export let buttonClassName =
 		'w-fit text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition';