refactor: fixed new Collapsible Component to allow passed in classes

chore: format

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

@@ -4,13 +4,11 @@
 	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}>
+<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"
@@ -23,10 +21,7 @@
 			<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"
-		>
+	<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}"
@@ -94,4 +89,3 @@
 		{/each}
 	</div>
 </Collapsible>
-</div>

src/lib/components/common/Collapsible.svelte

@@ -2,7 +2,7 @@
 	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;
@@ -16,9 +16,17 @@
 			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;
@@ -26,12 +34,3 @@
 		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>