refac: styling

src/lib/components/chat/MessageInput.svelte

@@ -144,6 +144,7 @@
 			files = files.filter((item) => item.status !== null);
 		}
 	};
+
 	const inputFilesHandler = async (inputFiles) => {
 		inputFiles.forEach((file) => {
 			console.log(file, file.name.split('.').at(-1));

src/lib/components/common/FileItem.svelte

@@ -48,7 +48,7 @@
 		dispatch('click');
 	}}
 >
-	<div class="p-3 bg-white/10 text-white rounded-xl">
+	<div class="p-3 bg-black/20 dark:bg-white/10 text-white rounded-xl">
 		{#if status === 'processed'}
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
@@ -105,7 +105,7 @@
 		{/if}
 	</div>
 
-	<div class="flex flex-col justify-center -space-y-0.5 px-2.5 w-full">
+	<div class="flex flex-col justify-center -space-y-0.5 ml-1 px-2.5 w-full">
 		<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1 mb-1">
 			{name}
 		</div>

src/lib/components/icons/FloppyDisk.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	stroke="currentColor"
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-width={strokeWidth}
+		d="M11 16h2m6.707-9.293-2.414-2.414A1 1 0 0 0 16.586 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7.414a1 1 0 0 0-.293-.707ZM16 20v-6a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v6h8ZM9 4h6v3a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Z"
+	/>
+</svg>

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

@@ -27,6 +27,8 @@
 	import { processFile } from '$lib/apis/retrieval';
 	import AddContentMenu from './Collection/AddContentMenu.svelte';
 	import AddTextContentModal from './Collection/AddTextContentModal.svelte';
+	import Check from '$lib/components/icons/Check.svelte';
+	import FloppyDisk from '$lib/components/icons/FloppyDisk.svelte';
 
 	let largeScreen = true;
 
@@ -410,10 +412,20 @@
 					<div class="flex-1 flex justify-start max-h-full overflow-hidden pl-3">
 						{#if selectedFile}
 							<div class=" flex flex-col w-full h-full">
-								<div class=" flex-shrink-0 mb-2">
+								<div class=" flex-shrink-0 mb-2 flex items-center">
-									<div class=" text-xl line-clamp-1">
+									<div class=" flex-1 text-xl line-clamp-1">
 										{selectedFile?.meta?.name}
 									</div>
+
+									<div>
+										<Tooltip content="Save">
+											<button
+												class="self-center w-fit text-sm py-1 px-2.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-lg"
+											>
+												Save
+											</button>
+										</Tooltip>
+									</div>
 								</div>
 
 								<div class=" flex-grow">

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

@@ -35,7 +35,7 @@
 >
 	<Tooltip content={$i18n.t('Add Content')}>
 		<button
-			class=" px-2 py-2 rounded-xl border border-gray-100 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
+			class=" px-2 py-2 rounded-xl border border-gray-50 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
 			on:click={(e) => {
 				e.stopPropagation();
 				show = true;

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

@@ -14,7 +14,7 @@
 			<FileItem
 				className="w-full"
 				colorClassName="{selectedFileId === file.id
-					? 'bg-gray-850'
+					? ' bg-gray-50 dark:bg-gray-850'
 					: 'bg-transparent'} hover:bg-gray-50 dark:hover:bg-gray-850 transition"
 				{file}
 				name={file.meta.name}