feat: add extra affordances to make it obvious websearch & reasoning can be opened (#1613)

Author: nsarrazin

src/lib/components/OpenWebSearchResults.svelte

@@ -8,6 +8,7 @@
 	import CarbonError from "~icons/carbon/error-filled";
 	import EosIconsLoading from "~icons/eos-icons/loading";
 	import IconInternet from "./icons/IconInternet.svelte";
+	import CarbonCaretDown from "~icons/carbon/caret-down";
 
 	export let webSearchMessages: MessageWebSearchUpdate[] = [];
 
@@ -22,9 +23,11 @@
 </script>
 
 <details
-	class="flex w-fit max-w-full rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900"
+	class="group flex w-fit max-w-full flex-col rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900"
 >
-	<summary class="grid min-w-72 select-none grid-cols-[40px,1fr] items-center gap-2.5 p-2">
+	<summary
+		class="grid min-w-72 cursor-pointer select-none grid-cols-[40px,1fr,24px] items-center gap-2.5 rounded-xl p-2 group-open:rounded-b-none hover:bg-gray-500/10"
+	>
 		<div
 			class="relative grid aspect-square place-content-center overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800"
 		>
@@ -59,6 +62,7 @@
 				{/if}
 			</dt>
 		</dl>
+		<CarbonCaretDown class="size-6 text-gray-400 transition-transform group-open:rotate-180" />
 	</summary>
 
 	<div class="content px-5 pb-5 pt-4">

src/lib/components/chat/ChatInput.svelte

@@ -65,7 +65,7 @@
 		enterkeyhint={!isVirtualKeyboard() ? "enter" : "send"}
 		tabindex="0"
 		rows="1"
-		class="scrollbar-custom absolute max-sm:text-[16px] max-sm:p-2.5 top-0 m-0 h-full w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0"
+		class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0 max-sm:p-2.5 max-sm:text-[16px]"
 		class:text-gray-400={disabled}
 		bind:value
 		bind:this={textareaElement}

src/lib/components/chat/OpenReasoningResults.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
 	import MarkdownRenderer from "./MarkdownRenderer.svelte";
+	import CarbonCaretDown from "~icons/carbon/caret-down";
 
 	export let summary: string;
 	export let content: string;
 	export let loading: boolean = false;
 </script>
 
 <details
-	class="flex w-fit max-w-full flex-col rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900"
+	class="group flex w-fit max-w-full flex-col rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900"
 >
 	<summary
-		class="grid min-w-72 cursor-pointer select-none grid-cols-[40px,1fr] items-center gap-2.5 p-2"
+		class="
+		grid min-w-72 cursor-pointer select-none grid-cols-[40px,1fr,24px] items-center gap-2.5 rounded-xl p-2 group-open:rounded-b-none hover:bg-gray-500/10"
 	>
 		<div
 			class="relative grid aspect-square place-content-center overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800"
@@ -49,6 +51,7 @@
 				{summary}
 			</dt>
 		</dl>
+		<CarbonCaretDown class="size-6 text-gray-400 transition-transform group-open:rotate-180" />
 	</summary>
 
 	<div