enh: files chat control

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

@@ -6,8 +6,11 @@
 	import XMark from '$lib/components/icons/XMark.svelte';
 	import AdvancedParams from '../Settings/Advanced/AdvancedParams.svelte';
 	import Valves from '$lib/components/common/Valves.svelte';
+	import FileItem from '$lib/components/common/FileItem.svelte';
 
 	export let models = [];
+
+	export let chatFiles = [];
 	export let valves = {};
 	export let params = {};
 </script>
@@ -26,9 +29,33 @@
 	</div>
 
 	<div class=" dark:text-gray-200 text-sm font-primary">
+		{#if chatFiles.length > 0}
+			<div>
+				<div class="mb-1.5 font-medium">{$i18n.t('Files')}</div>
+
+				<div>
+					{#each chatFiles as file}
+						<FileItem
+							className="w-full"
+							url={`${file?.url}`}
+							name={file.name}
+							type={file.type}
+							dismissible={true}
+							on:dismiss={() => {
+								// Remove the file from the chatFiles array
+								chatFiles = chatFiles.filter((f) => f.id !== file.id);
+							}}
+						/>
+					{/each}
+				</div>
+			</div>
+
+			<hr class="my-2 border-gray-100 dark:border-gray-800" />
+		{/if}
+
 		{#if models.length === 1 && models[0]?.pipe?.valves_spec}
 			<div>
-				<div class=" font-medium">Valves</div>
+				<div class=" font-medium">{$i18n.t('Valves')}</div>
 
 				<div>
 					<Valves valvesSpec={models[0]?.pipe?.valves_spec} bind:valves />