refac

src/lib/components/chat/Controls/Controls.svelte

@@ -7,6 +7,7 @@
 	import AdvancedParams from '../Settings/Advanced/AdvancedParams.svelte';
 	import Valves from '$lib/components/common/Valves.svelte';
 	import FileItem from '$lib/components/common/FileItem.svelte';
+	import Collapsible from '$lib/components/common/Collapsible.svelte';
 
 	export let models = [];
 
@@ -28,12 +29,10 @@
 		</button>
 	</div>
 
-	<div class=" dark:text-gray-200 text-sm font-primary">
+	<div class=" dark:text-gray-200 text-sm font-primary py-0.5">
 		{#if chatFiles.length > 0}
-			<div>
-				<div class="mb-1.5 font-medium">{$i18n.t('Files')}</div>
-
-				<div class="flex flex-col gap-1">
+			<Collapsible title={$i18n.t('Files')} open={true}>
+				<div class="flex flex-col gap-1 mt-1.5" slot="content">
 					{#each chatFiles as file, fileIdx}
 						<FileItem
 							className="w-full"
@@ -50,7 +49,7 @@
 						/>
 					{/each}
 				</div>
-			</div>
+			</Collapsible>
 
 			<hr class="my-2 border-gray-100 dark:border-gray-800" />
 		{/if}
@@ -67,27 +66,25 @@
 			<hr class="my-2 border-gray-100 dark:border-gray-800" />
 		{/if}
 
-		<div>
-			<div class="mb-1.5 font-medium">{$i18n.t('System Prompt')}</div>
-
-			<div>
+		<Collapsible title={$i18n.t('System Prompt')} open={true}>
+			<div class=" mt-1.5" slot="content">
 				<textarea
 					bind:value={params.system}
-					class="w-full rounded-lg px-4 py-3 text-sm dark:text-gray-300 dark:bg-gray-850 border border-gray-100 dark:border-gray-800 outline-none resize-none"
-					rows="3"
+					class="w-full rounded-lg px-3.5 py-2.5 text-sm dark:text-gray-300 dark:bg-gray-850 border border-gray-100 dark:border-gray-800 outline-none resize-none"
+					rows="4"
 					placeholder={$i18n.t('Enter system prompt')}
 				/>
 			</div>
-		</div>
+		</Collapsible>
 
 		<hr class="my-2 border-gray-100 dark:border-gray-800" />
 
-		<div>
-			<div class="mb-1.5 font-medium">{$i18n.t('Advanced Params')}</div>
-
-			<div>
-				<AdvancedParams bind:params />
+		<Collapsible title={$i18n.t('Advanced Params')} open={true}>
+			<div class="text-sm mt-1.5" slot="content">
+				<div>
+					<AdvancedParams bind:params />
+				</div>
 			</div>
-		</div>
+		</Collapsible>
 	</div>
 </div>

src/lib/components/common/Collapsible.svelte

@@ -1,14 +1,49 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
+
+	import ChevronUp from '../icons/ChevronUp.svelte';
+	import ChevronDown from '../icons/ChevronDown.svelte';
+
 	export let open = false;
 	export let className = '';
+	export let title = null;
 </script>
 
 <div class={className}>
-	<button on:click={() => (open = !open)}>
-		<slot />
-	</button>
+	{#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">
+				<div>
+					{title}
+				</div>
+
+				<div>
+					{#if open}
+						<ChevronUp strokeWidth="3.5" className="size-3.5 " />
+					{:else}
+						<ChevronDown strokeWidth="3.5" className="size-3.5 " />
+					{/if}
+				</div>
+			</div>
+		</button>
+	{:else}
+		<button on:click={() => (open = !open)}>
+			<slot />
+
+			<div
+				class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
+			>
+				<slot />
+
+				{#if open}
+					<ChevronUp strokeWidth="3.5" className="size-3.5 " />
+				{:else}
+					<ChevronDown strokeWidth="3.5" className="size-3.5 " />
+				{/if}
+			</div>
+		</button>
+	{/if}
 
 	{#if open}
 		<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>