refactor: fixed new Collapsible Component to allow passed in classes

chore: format

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

@@ -4,94 +4,88 @@
 	import MagnifyingGlass from '$lib/components/icons/MagnifyingGlass.svelte';
 	import Collapsible from '$lib/components/common/Collapsible.svelte';
 
-
 	export let status = { urls: [], query: '' };
 	let state = false;
 </script>
 
-<div class="w-full space-y-1">
-	<Collapsible bind:open={state}>
-		<div
-			class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
-			slot="head"
-		>
-			<slot />
+<Collapsible bind:open={state} className="w-full space-y-1">
+	<div
+		class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
+		slot="head"
+	>
+		<slot />
 
-			{#if state}
-				<ChevronUp strokeWidth="3.5" className="size-3.5 " />
-			{:else}
-				<ChevronDown strokeWidth="3.5" className="size-3.5 " />
-			{/if}
-		</div>
-		<div
-			class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl"
-			slot="content"
-		>
-			{#if status?.query}
-				<a
-					href="https://www.google.com/search?q={status.query}"
-					target="_blank"
-					class="flex w-full items-center p-3 px-4 border-b border-gray-300/30 dark:border-gray-700/50 group/item justify-between font-normal text-gray-800 dark:text-gray-300 no-underline"
-				>
-					<div class="flex gap-2 items-center">
-						<MagnifyingGlass />
-		
-						<div class=" line-clamp-1">
-							{status.query}
-						</div>
+		{#if state}
+			<ChevronUp strokeWidth="3.5" className="size-3.5 " />
+		{:else}
+			<ChevronDown strokeWidth="3.5" className="size-3.5 " />
+		{/if}
+	</div>
+	<div class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl" slot="content">
+		{#if status?.query}
+			<a
+				href="https://www.google.com/search?q={status.query}"
+				target="_blank"
+				class="flex w-full items-center p-3 px-4 border-b border-gray-300/30 dark:border-gray-700/50 group/item justify-between font-normal text-gray-800 dark:text-gray-300 no-underline"
+			>
+				<div class="flex gap-2 items-center">
+					<MagnifyingGlass />
+
+					<div class=" line-clamp-1">
+						{status.query}
 					</div>
-		
-					<div
-						class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
+				</div>
+
+				<div
+					class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
+				>
+					<!--  -->
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						class="size-4"
 					>
-						<!--  -->
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-							fill="currentColor"
-							class="size-4"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-					</div>
-				</a>
-			{/if}
-		
-			{#each status.urls as url, urlIdx}
-				<a
-					href={url}
-					target="_blank"
-					class="flex w-full items-center p-3 px-4 {urlIdx === status.urls.length - 1
-						? ''
-						: 'border-b border-gray-300/30 dark:border-gray-700/50'} group/item justify-between font-normal text-gray-800 dark:text-gray-300"
+						<path
+							fill-rule="evenodd"
+							d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</div>
+			</a>
+		{/if}
+
+		{#each status.urls as url, urlIdx}
+			<a
+				href={url}
+				target="_blank"
+				class="flex w-full items-center p-3 px-4 {urlIdx === status.urls.length - 1
+					? ''
+					: 'border-b border-gray-300/30 dark:border-gray-700/50'} group/item justify-between font-normal text-gray-800 dark:text-gray-300"
+			>
+				<div class=" line-clamp-1">
+					{url}
+				</div>
+
+				<div
+					class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
 				>
-					<div class=" line-clamp-1">
-						{url}
-					</div>
-		
-					<div
-						class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
+					<!--  -->
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						class="size-4"
 					>
-						<!--  -->
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-							fill="currentColor"
-							class="size-4"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-					</div>
-				</a>
-			{/each}
-		</div>
-	</Collapsible>	
-</div>
+						<path
+							fill-rule="evenodd"
+							d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</div>
+			</a>
+		{/each}
+	</div>
+</Collapsible>

src/lib/components/common/Collapsible.svelte

@@ -2,11 +2,11 @@
 	import { afterUpdate } from 'svelte';
 
 	export let open = false;
-
+	export let className = '';
 
 	// Manage the max-height of the collapsible content for snappy transitions
 	let contentElement: HTMLElement;
-  	let maxHeight = '0px'; // Initial max-height
+	let maxHeight = '0px'; // Initial max-height
 	// After any state update, adjust the max-height for the transition
 	afterUpdate(() => {
 		if (open) {
@@ -15,23 +15,22 @@
 		} else {
 			maxHeight = '0px';
 		}
-  	});
-
+	});
 </script>
 
+<div class={className}>
+	<button on:click={() => (open = !open)}>
+		<slot name="head" />
+	</button>
+	<div bind:this={contentElement} class="collapsible-content" style="max-height: {maxHeight};">
+		<slot name="content" />
+	</div>
+</div>
+
 <style>
 	.collapsible-content {
-	  overflow: hidden;
-	  transition: max-height 0.3s ease-out;
-	  max-height: 0;
+		overflow: hidden;
+		transition: max-height 0.3s ease-out;
+		max-height: 0;
 	}
 </style>
-
-<div>
-	<button on:click={() => open = !open}>
-		<slot name="head"></slot>
-	</button>
-	<div bind:this={contentElement} class="collapsible-content" style="max-height: {maxHeight};">
-		<slot name="content"></slot>
-	</div>
-</div>