refactor: Update WebSearchResults.svelte to use new CollapsibleComponent

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

@@ -2,17 +2,18 @@
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
 	import MagnifyingGlass from '$lib/components/icons/MagnifyingGlass.svelte';
-	import { Collapsible } from 'bits-ui';
-	import { slide } from 'svelte/transition';
+	import Collapsible from '$lib/components/common/Collapsible.svelte';
+
 
 	export let status = { urls: [], query: '' };
 	let state = false;
 </script>
 
-<Collapsible.Root class="w-full space-y-1" bind:open={state}>
-	<Collapsible.Trigger>
+<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 />
 
@@ -22,11 +23,9 @@
 				<ChevronDown strokeWidth="3.5" className="size-3.5 " />
 			{/if}
 		</div>
-	</Collapsible.Trigger>
-
-	<Collapsible.Content
-		class=" text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl"
-		transition={slide}
+		<div
+			class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl"
+			slot="content"
 		>
 			{#if status?.query}
 				<a
@@ -93,5 +92,6 @@
 					</div>
 				</a>
 			{/each}
-	</Collapsible.Content>
-</Collapsible.Root>
+		</div>
+	</Collapsible>	
+</div>
\ No newline at end of file