Merge pull request #9865 from feynmanliang/fix-9864

fix - Fixes citation modal toggle when clicking inliine citations and # citations > 3

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

@@ -122,6 +122,7 @@
 			</div>
 		{:else}
 			<Collapsible
+				id="collapsible-sources"
 				bind:open={isCollapsibleOpen}
 				className="w-full max-w-full "
 				buttonClassName="w-fit max-w-full"
@@ -178,6 +179,7 @@
 					<div class="flex text-xs font-medium flex-wrap">
 						{#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;

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

@@ -716,12 +716,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 }) => {

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 -->