From 73c291193b8d18030cbee35fbcfe5b483810576c Mon Sep 17 00:00:00 2001
From: Jannik Streidl <jannik.stdl@gmail.com>
Date: Mon, 7 Oct 2024 21:22:36 +0200
Subject: [PATCH] fix: do not toggle collapsible if you click on a citation

---
 .../components/chat/Messages/Citations.svelte |  6 ++---
 src/lib/components/common/Collapsible.svelte  | 26 ++++++++++++-------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/chat/Messages/Citations.svelte b/src/lib/components/chat/Messages/Citations.svelte
index 5f1b655f4..162ad6683 100644
--- a/src/lib/components/chat/Messages/Citations.svelte
+++ b/src/lib/components/chat/Messages/Citations.svelte
@@ -68,7 +68,7 @@
 			{#each _citations as citation, idx}
 				<div class="flex gap-1 text-xs font-semibold">
 					<button
-						class="flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96"
+						class="no-toggle flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96"
 						on:click={() => {
 							showCitationModal = true;
 							selectedCitation = citation;
@@ -94,7 +94,7 @@
 					{#each _citations.slice(0, 2) as citation, idx}
 						<div class="flex gap-1 text-xs font-semibold">
 							<button
-								class="flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96"
+								class="no-toggle flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96"
 								on:click={() => {
 									showCitationModal = true;
 									selectedCitation = citation;
@@ -130,7 +130,7 @@
 						{#each _citations as citation, idx}
 							<div class="flex gap-1 text-xs font-semibold">
 								<button
-									class="flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96"
+									class="no-toggle flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96"
 									on:click={() => {
 										showCitationModal = true;
 										selectedCitation = citation;
diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
index df032b7ef..d62e26c37 100644
--- a/src/lib/components/common/Collapsible.svelte
+++ b/src/lib/components/common/Collapsible.svelte
@@ -8,32 +8,38 @@
 	export let open = false;
 	export let className = '';
 	export let title = null;
+
+	function handleClick(event) {
+		if (!event.target.closest('.no-toggle')) {
+			open = !open;
+		}
+	}
 </script>
 
 <div class={className}>
 	{#if title !== null}
-		<button class="w-full" on:click={() => (open = !open)}>
-			<div class=" w-full font-medium transition flex items-center justify-between gap-2">
+		<button class="w-full" on:click={handleClick}>
+			<div class="w-full font-medium transition flex items-center justify-between gap-2">
 				<div>
 					{title}
 				</div>
 
 				<div>
 					{#if open}
-						<ChevronUp strokeWidth="3.5" className="size-3.5 " />
+						<ChevronUp strokeWidth="3.5" className="size-3.5" />
 					{:else}
-						<ChevronDown strokeWidth="3.5" className="size-3.5 " />
+						<ChevronDown strokeWidth="3.5" className="size-3.5" />
 					{/if}
 				</div>
 			</div>
 		</button>
 	{:else}
-		<button on:click={() => (open = !open)}>
-			<div
-				class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
-			>
-				<slot />
-			</div>
+		<button
+			type="button"
+			on:click={handleClick}
+			class="flex w-full items-center gap-2 text-left text-gray-500 transition hover:text-gray-700 dark:hover:text-gray-300"
+		>
+			<slot />
 		</button>
 	{/if}