feat: collection file content editor

src/lib/components/workspace/Knowledge/Collection/Files.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
 	import FileItem from '$lib/components/common/FileItem.svelte';
 
+	export let selectedFileId = null;
 	export let files = [];
 </script>
 
@@ -9,11 +13,19 @@
 		<div class="mt-2 px-2">
 			<FileItem
 				className="w-full"
-				colorClassName="bg-transparent hover:bg-gray-50 dark:hover:bg-gray-850 transition"
+				colorClassName="{selectedFileId === file.id
+					? 'bg-gray-850'
+					: 'bg-transparent'} hover:bg-gray-50 dark:hover:bg-gray-850 transition"
 				{file}
 				name={file.meta.name}
 				type="file"
 				dismissible
+				on:click={() => {
+					dispatch('click', file.id);
+				}}
+				on:dismiss={() => {
+					dispatch('delete', file.id);
+				}}
 			/>
 		</div>
 	{/each}